<template>
	<el-card class="box-card">
		<!-- 查询条件-->
		<el-row :gutter="20">
			<el-col :span="6">
				<el-input placeholder="请输入角色名称" v-model="form.name"></el-input>
			</el-col>
			<el-col :span="6">
				<el-input placeholder="请输入相关功能(模糊查询)" v-model="form.info"></el-input>
			</el-col>
			
			<el-col :span="6">
				<el-button type="primary" icon="el-icon-search" @click="query()">查询</el-button>
        <el-button type="danger" icon="el-icon-delete" size="small" @click="clearQuery()">清空查询</el-button>
      </el-col>
		</el-row>
		<br />
		<el-row :gutter="20">
			<el-col :span="3">
				<el-button type="success" icon="el-icon-plus" @click="addRole()">新增</el-button>
			</el-col>
			<el-col :span="2">
				<el-button type="primary" icon="el-icon-house" @click="back()">返回主页</el-button>
			</el-col>
			</el-row>

		<el-table :data="tableData" border style="width: 100%">
			<el-table-column prop="name" label="角色" width="100"></el-table-column>
			<el-table-column prop="info" label="功能" width="100"></el-table-column>
			<el-table-column prop="" label="管理菜单" width="210">
				<template slot-scope="scope">
					<span v-for="menu in scope.row.menus">{{menu.name}},</span>
						
				</template>
				
			</el-table-column>
			<el-table-column prop="account" label="操作人"></el-table-column>
			<el-table-column prop="operTime" label="操作时间" align="center"></el-table-column>
			<el-table-column label="操作" fixed="right">
				<template slot-scope="scope">
					<el-button type="warning" icon="el-icon-edit" size="small" @click="update(scope.row.id)">编辑</el-button>
					<el-button size="small" type="danger" icon="el-icon-delete" @click="deleteRole(scope.row.id)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div class="block">
			<el-pagination
			 @size-change="handleSizeChange"
			  @current-change="handleCurrentChange"
				:current-page="form.pageNum" 
				:page-sizes="[2, 4, 6, 8]"
				:page-size="form.pageSize"
				layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>
		</div>
		<Add ref="add"></Add>
		<Upate ref="update"></Upate>
	</el-card>
</template>

<script>
	import Add from './Add.vue';
	import Upate from './Upate.vue';
	export default {
		components:{
		Add	,Upate
		},
		data() {
			return {
				tableData: [],
				form: {
					name: '',
					info:'',
					pageNum: 1,
					pageSize: 2,
				},
				total:0
			}
		},
		methods: {
      clearQuery(){
        this.form.name='';
        this.form.info='';
      },
			deleteRole(id){
				this.$confirm('您确定要删除本条数据吗, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$http.get("admin/RoleCtl/deleteRole?id=" + id).then((resp) => {
						if (resp.data.code == 200) {
							this.$message({
								showClose: true,
								message: '恭喜你，修改成功✔',
								type: 'success'
							});
							this.$router.go();
						}
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消操作'
					});
				});
				
				
			},
			update(id){
				this.$refs.update.findRoleById(id);
				this.$refs.update.dialogVisible = true;
			},
			addRole() {
				this.$refs.add.dialogVisible= true;
			},
			back() {
				this.$router.go();
			},
			query() {

				this.$http.post("admin/RoleCtl/list", this.form).then((resp) => {
					this.tableData = resp.data.data.list;
					this.total=resp.data.data.total;
				})

			},
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
				this.form.pageSize=val;
				this.form.pageNum=1;
				this.query();
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
				this.form.pageNum=val;
				this.query();
			}
		},
		mounted() {
			this.query();
		}
	}
</script>

<style>
</style>